JavaScript Event Loop-നെക്കുറിച്ചുള്ള രഹസ്യങ്ങൾ: ടാസ്‌ക് ക്യൂകളും, മൈക്രോടാസ്‌ക് മാനേജ്‌മെന്റും

JavaScript ഒരു സിംഗിൾ-ത്രെഡ് ഭാഷയാണെങ്കിലും, കോൺകറൻസിയും അസിൻക്രണസ് പ്രവർത്തനങ്ങളും കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ ഇതിന് സാധിക്കുന്നു. ഇതിന് പിന്നിലെ കാരണം, വളരെ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്ന Event Loop ആണ്. മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതും, വേഗത്തിൽ പ്രതികരിക്കുന്നതുമായ ആപ്ലിക്കേഷനുകൾ എഴുതാൻ ലക്ഷ്യമിടുന്ന ഏതൊരു JavaScript ഡെവലപ്പർക്കും ഇത് എങ്ങനെ പ്രവർത്തിക്കുമെന്നതിനെക്കുറിച്ച് വ്യക്തമായ ധാരണ ഉണ്ടായിരിക്കണം. ഈ സമഗ്രമായ ഗൈഡ്, Event Loop-ൻ്റെ സൂക്ഷ്മതകൾ, ടാസ്‌ക് ക്യൂ (Callback ക്യൂ എന്നും അറിയപ്പെടുന്നു), മൈക്രോടാസ്‌ക് ക്യൂ എന്നിവയിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് വിശദീകരിക്കുന്നു.

JavaScript Event Loop എന്നാൽ എന്താണ്?

Event Loop എന്നത് കോൾ സ്റ്റാക്കും ടാസ്‌ക് ക്യൂവും തുടർച്ചയായി നിരീക്ഷിക്കുന്ന ഒരു പ്രക്രിയയാണ്. കോൾ സ്റ്റാക്ക് കാലിയാണോ എന്ന് പരിശോധിക്കുക എന്നതാണ് ഇതിൻ്റെ പ്രധാന ധർമ്മം. കാലിയാണെങ്കിൽ, Event Loop ടാസ്‌ക് ക്യൂവിൽ നിന്ന് ആദ്യത്തെ ടാസ്‌ക് എടുത്ത് എക്സിക്യൂഷനായി കോൾ സ്റ്റാക്കിലേക്ക് നൽകുന്നു. ഈ പ്രക്രിയ തുടർച്ചയായി ആവർത്തിക്കുന്നു, ഇത് JavaScript-ന് ഒന്നിലധികം പ്രവർത്തനങ്ങൾ ഒരേസമയം കൈകാര്യം ചെയ്യാൻ സഹായിക്കുന്നു.

ഇതൊരു ജോലിക്കാരനാണെന്ന് സങ്കൽപ്പിക്കുക. അയാൾ രണ്ട് കാര്യങ്ങൾ തുടർച്ചയായി പരിശോധിക്കുന്നു: “ഞാൻ ഇപ്പോൾ എന്തെങ്കിലും ജോലി ചെയ്യുന്നുണ്ടോ (കോൾ സ്റ്റാക്ക്)?” കൂടാതെ “എനിക്ക് ചെയ്യാനായി എന്തെങ്കിലും കാത്തിരിക്കുന്നുണ്ടോ (ടാസ്‌ക് ക്യൂ)?” ഒരു ജോലിക്കാരൻ വെറുതെ ഇരിക്കുകയാണെങ്കിൽ (കോൾ സ്റ്റാക്ക് കാലിയാണ്), ടാസ്‌ക്കുകൾ കാത്തിരിക്കുന്നുണ്ടെങ്കിൽ (ടാസ്‌ക് ക്യൂ കാലിയല്ലെങ്കിൽ), ജോലിക്കാരൻ അടുത്ത ടാസ്‌ക് എടുത്ത് ജോലി ചെയ്യാൻ തുടങ്ങും.

JavaScript-നെ ബ്ലോക്ക് ചെയ്യാത്ത ഓപ്പറേഷനുകൾ ചെയ്യാൻ അനുവദിക്കുന്ന ഒരു എഞ്ചിനാണ് Event Loop. ഇത് ഇല്ലാതിരുന്നെങ്കിൽ, JavaScript-ന് കോഡ് ഒന്നിനുപുറകെ ഒന്നായി എക്സിക്യൂട്ട് ചെയ്യാൻ മാത്രമേ കഴിയുമായിരുന്നുള്ളു. ഇത് പ്രത്യേകിച്ച് വെബ് ബ്രൗസറുകളിലും, I/O പ്രവർത്തനങ്ങൾ, ഉപയോക്തൃ ഇടപെടലുകൾ, മറ്റ് അസിൻക്രണസ് ഇവന്റുകൾ എന്നിവ കൈകാര്യം ചെയ്യുന്ന Node.js എൻവയോൺമെന്റുകളിലും മോശം ഉപയോക്തൃ അനുഭവത്തിലേക്ക് നയിക്കുമായിരുന്നു.

കോൾ സ്റ്റാക്ക്: കോഡ് എവിടെയാണ് പ്രവർത്തിക്കുന്നത്

Call Stack എന്നത് ലാസ്റ്റ്-ഇൻ, ഫസ്റ്റ്-ഔട്ട് (LIFO) തത്വം പിന്തുടരുന്ന ഒരു ഡാറ്റാ ഘടനയാണ്. ഇവിടെയാണ് JavaScript കോഡ് എക്സിക്യൂട്ട് ചെയ്യുന്നത്. ഒരു ഫംഗ്‌ഷൻ വിളിക്കുമ്പോൾ, അത് കോൾ സ്റ്റാക്കിലേക്ക് വരുന്നു. ഫംഗ്‌ഷൻ എക്സിക്യൂഷൻ പൂർത്തിയാകുമ്പോൾ, അത് സ്റ്റാക്കിൽ നിന്ന് പുറത്തുവരുന്നു.

ഇതാ ഒരു ലളിതമായ ഉദാഹരണം:

function firstFunction() {
  console.log('First function');
  secondFunction();
}

function secondFunction() {
  console.log('Second function');
}

firstFunction();

എക്സിക്യൂഷൻ സമയത്ത് കോൾ സ്റ്റാക്ക് എങ്ങനെയായിരിക്കുമെന്ന് നോക്കാം:

1. ആരംഭത്തിൽ, കോൾ സ്റ്റാക്ക് കാലിയായിരിക്കും.
2. firstFunction() വിളിക്കുകയും സ്റ്റാക്കിലേക്ക് നൽകുകയും ചെയ്യുന്നു.
3. firstFunction()-ൻ്റെ ഉള്ളിൽ, console.log('First function') എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.
4. secondFunction() വിളിക്കുകയും സ്റ്റാക്കിലേക്ക് നൽകുകയും ചെയ്യുന്നു (firstFunction()-ൻ്റെ മുകളിൽ).
5. secondFunction()-ൻ്റെ ഉള്ളിൽ, console.log('Second function') എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.
6. secondFunction() പൂർത്തിയാക്കുകയും സ്റ്റാക്കിൽ നിന്ന് പുറത്തുവരികയും ചെയ്യുന്നു.
7. firstFunction() പൂർത്തിയാക്കുകയും സ്റ്റാക്കിൽ നിന്ന് പുറത്തുവരികയും ചെയ്യുന്നു.
8. ഇപ്പോൾ കോൾ സ്റ്റാക്ക് വീണ്ടും കാലിയായി.

ഒരു ഫംഗ്‌ഷൻ ശരിയായ എക്സിറ്റ് കണ്ടീഷൻ ഇല്ലാതെ തന്നെ, സ്വയം വീണ്ടും വിളിക്കുകയാണെങ്കിൽ, അത് Stack Overflow എന്ന പിശകിലേക്ക് നയിച്ചേക്കാം. ഇവിടെ, കോൾ സ്റ്റാക്ക് അതിൻ്റെ പരമാവധി വലുപ്പം കവിയുകയും, പ്രോഗ്രാം തകരാറിലാകാൻ സാധ്യതയുണ്ട്.

ടാസ്‌ക് ക്യൂ (Callback ക്യൂ): അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നു

Task Queue (Callback Queue അല്ലെങ്കിൽ Macrotask Queue എന്നും അറിയപ്പെടുന്നു) Event Loop-ൽ പ്രോസസ്സ് ചെയ്യാൻ കാത്തിരിക്കുന്ന ടാസ്‌ക്കുകളുടെ ഒരു ക്യൂ ആണ്. ഇത് താഴെ പറയുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ ഉപയോഗിക്കുന്നു:

• setTimeout, setInterval കോൾബാക്കുകൾ
• ഇവന്റ് ലിസണർമാർ (ഉദാഹരണത്തിന്, ക്ലിക്ക് ഇവന്റുകൾ, കീപ്രസ് ഇവന്റുകൾ)
• XMLHttpRequest (XHR), fetch കോൾബാക്കുകൾ (നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾക്കായി)
• ഉപയോക്തൃ ഇടപെടൽ ഇവന്റുകൾ

ഒരു അസിൻക്രണസ് പ്രവർത്തനം പൂർത്തിയാകുമ്പോൾ, അതിൻ്റെ കോൾബാക്ക് ഫംഗ്‌ഷൻ ടാസ്‌ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു. തുടർന്ന് Event Loop ഈ കോൾബാക്കുകൾ ഓരോന്നായി എടുത്ത് കോൾ സ്റ്റാക്കിൽ എക്സിക്യൂട്ട് ചെയ്യുന്നു.

ഇതൊരു setTimeout ഉദാഹരണം വഴി വ്യക്തമാക്കാം:

console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

നിങ്ങൾ ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും എന്ന് പ്രതീക്ഷിക്കുന്നത്:

Start
Timeout callback
End

എന്നാൽ, യഥാർത്ഥ ഔട്ട്‌പുട്ട് ഇപ്രകാരമാണ്:

Start
End
Timeout callback

എന്തുകൊണ്ടാണ് ഇങ്ങനെ സംഭവിക്കുന്നതെന്ന് നോക്കാം:

1. console.log('Start') എക്സിക്യൂട്ട് ചെയ്യുകയും “Start” എന്ന് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു.
2. setTimeout(() => { ... }, 0) വിളിക്കുന്നു. കാലതാമസം 0 ​​മില്ലിസെക്കൻഡ് ആണെങ്കിലും, കോൾബാക്ക് ഫംഗ്‌ഷൻ ഉടനടി എക്സിക്യൂട്ട് ചെയ്യില്ല. പകരം, ഇത് ടാസ്‌ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു.
3. console.log('End') എക്സിക്യൂട്ട് ചെയ്യുകയും “End” എന്ന് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു.
4. കോൾ സ്റ്റാക്ക് ഇപ്പോൾ കാലിയാണ്. Event Loop ടാസ്‌ക് ക്യൂ പരിശോധിക്കുന്നു.
5. setTimeout-ൽ നിന്നുള്ള കോൾബാക്ക് ഫംഗ്‌ഷൻ ടാസ്‌ക് ക്യൂവിൽ നിന്ന് കോൾ സ്റ്റാക്കിലേക്ക് നീക്കുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു, “Timeout callback” എന്ന് ലോഗ് ചെയ്യുന്നു.

0ms കാലതാമസമുണ്ടെങ്കിൽ പോലും, setTimeout കോൾബാക്കുകൾ എപ്പോഴും അസിൻക്രണസായി എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു എന്ന് ഇത് വ്യക്തമാക്കുന്നു, നിലവിലെ സിൻക്രണസ് കോഡ് പ്രവർത്തിച്ചു കഴിഞ്ഞതിന് ശേഷം ഇത് നടപ്പിലാക്കുന്നു.

മൈക്രോടാസ്‌ക് ക്യൂ: ടാസ്‌ക് ക്യൂവിനേക്കാൾ ഉയർന്ന മുൻഗണന

Microtask Queue എന്നത് Event Loop നിയന്ത്രിക്കുന്ന മറ്റൊരു ക്യൂ ആണ്. നിലവിലെ ടാസ്‌ക് പൂർത്തിയായ ഉടൻ തന്നെ എക്സിക്യൂട്ട് ചെയ്യേണ്ട ടാസ്‌ക്കുകൾക്കാണിത്, എന്നാൽ Event Loop വീണ്ടും റെൻഡർ ചെയ്യുന്നതിനോ മറ്റ് ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനോ മുമ്പായി ഇത് പ്രവർത്തിക്കുന്നു. ടാസ്‌ക് ക്യൂവിനെക്കാൾ ഉയർന്ന മുൻഗണനയുള്ള ഒരു ക്യൂ ആണിത്.

മൈക്രോടാസ്‌ക്കുകളുടെ സാധാരണ ഉറവിടങ്ങൾ:

• Promises: Promises-ൻ്റെ .then(), .catch(), .finally() കോൾബാക്കുകൾ മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു.
• MutationObserver: DOM-ൽ (Document Object Model) ഉണ്ടാകുന്ന മാറ്റങ്ങൾ നിരീക്ഷിക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. Mutation observer കോൾബാക്കുകളും മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു.
• process.nextTick() (Node.js): നിലവിലെ പ്രവർത്തനം പൂർത്തിയായ ശേഷം, Event Loop തുടരുന്നതിന് മുമ്പ് എക്സിക്യൂട്ട് ചെയ്യുന്നതിനായി ഒരു കോൾബാക്ക് ഷെഡ്യൂൾ ചെയ്യുന്നു. ഇത് വളരെ ശക്തമാണെങ്കിലും, അമിതമായി ഉപയോഗിക്കുന്നത് I/O പ്രവർത്തനങ്ങളെ തടസ്സപ്പെടുത്താൻ സാധ്യതയുണ്ട്.
• queueMicrotask() (ആപേക്ഷികമായി പുതിയ ബ്രൗസർ API): ഒരു microtask-നെ ക്യൂവിൽ ചേർക്കാനുള്ള ഒരു സാധാരണ മാർഗ്ഗം.

ടാസ്‌ക് ക്യൂവും മൈക്രോടാസ്‌ക് ക്യൂവും തമ്മിലുള്ള പ്രധാന വ്യത്യാസം, ടാസ്‌ക് ക്യൂവിൽ നിന്ന് അടുത്ത ടാസ്‌ക് എടുക്കുന്നതിന് മുമ്പ് Event Loop, മൈക്രോടാസ്‌ക് ക്യൂവിലെ എല്ലാ മൈക്രോടാസ്‌ക്കുകളും പ്രോസസ്സ് ചെയ്യുന്നു എന്നതാണ്. ഇത് ഓരോ ടാസ്‌ക് പൂർത്തിയാകുമ്പോളും, മൈക്രോടാസ്‌ക്കുകൾ ഉടനടി എക്സിക്യൂട്ട് ചെയ്യാൻ സഹായിക്കുന്നു, കാലതാമസം കുറയ്ക്കുകയും പ്രതികരണശേഷി മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

Promises, setTimeout എന്നിവ ഉൾപ്പെടുന്ന ഈ ഉദാഹരണം പരിഗണിക്കുക:

console.log('Start');

Promise.resolve().then(() => {
  console.log('Promise callback');
});

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

ഇതിൻ്റെ ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:

Start
End
Promise callback
Timeout callback

ഇതിൻ്റെ വിശദീകരണം താഴെ നൽകുന്നു:

1. console.log('Start') എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.
2. Promise.resolve().then(() => { ... }) ഒരു resolved Promise ഉണ്ടാക്കുന്നു. .then() കോൾബാക്ക് മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു.
3. setTimeout(() => { ... }, 0) അതിൻ്റെ കോൾബാക്ക് ടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു.
4. console.log('End') എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.
5. കോൾ സ്റ്റാക്ക് കാലിയാണ്. Event Loop ആദ്യം മൈക്രോടാസ്‌ക് ക്യൂ പരിശോധിക്കുന്നു.
6. Promise കോൾബാക്ക് മൈക്രോടാസ്‌ക് ക്യൂവിൽ നിന്ന് കോൾ സ്റ്റാക്കിലേക്ക് നീക്കുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു, “Promise callback” എന്ന് ലോഗ് ചെയ്യുന്നു.
7. മൈക്രോടാസ്‌ക് ക്യൂ ഇപ്പോൾ കാലിയാണ്. Event Loop തുടർന്ന് ടാസ്‌ക് ക്യൂ പരിശോധിക്കുന്നു.
8. setTimeout കോൾബാക്ക് ടാസ്‌ക് ക്യൂവിൽ നിന്ന് കോൾ സ്റ്റാക്കിലേക്ക് നീക്കുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു, “Timeout callback” എന്ന് ലോഗ് ചെയ്യുന്നു.

മൈക്രോടാസ്‌ക്കുകൾ (Promise കോൾബാക്കുകൾ) ടാസ്‌ക്കുകൾക്ക് (setTimeout കോൾബാക്കുകൾ) മുമ്പാണ് എക്സിക്യൂട്ട് ചെയ്യുന്നതെന്ന് ഈ ഉദാഹരണം വ്യക്തമായി കാണിക്കുന്നു, setTimeout കാലതാമസം 0 ​​ആണെങ്കിൽ പോലും ഇത് സംഭവിക്കുന്നു.

മുൻഗണനയുടെ പ്രാധാന്യം: മൈക്രോടാസ്‌ക്കുകളും ടാസ്‌ക്കുകളും

പ്രതികരണശേഷിയുള്ള ഒരു ഉപയോക്തൃ ഇന്റർഫേസ് നിലനിർത്തുന്നതിന് ടാസ്‌ക്കുകളെക്കാൾ, മൈക്രോടാസ്‌ക്കുകൾക്ക് മുൻഗണന നൽകുന്നത് നിർണായകമാണ്. DOM അപ്‌ഡേറ്റ് ചെയ്യാനോ നിർണായകമായ ഡാറ്റാ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യാനോ കഴിയുന്നത്ര വേഗത്തിൽ എക്സിക്യൂട്ട് ചെയ്യേണ്ട പ്രവർത്തനങ്ങളിൽ, മൈക്രോടാസ്‌ക്കുകൾ ഉൾപ്പെടുന്നു. ടാസ്‌ക്കുകൾക്ക് മുമ്പ് മൈക്രോടാസ്‌ക്കുകൾ പ്രോസസ്സ് ചെയ്യുന്നതിലൂടെ, ഈ അപ്‌ഡേറ്റുകൾ വേഗത്തിൽ പ്രതിഫലിക്കുന്നു എന്ന് ബ്രൗസർക്ക് ഉറപ്പാക്കാൻ കഴിയും, ഇത് ആപ്ലിക്കേഷന്റെ അനുഭവപരിചയം മെച്ചപ്പെടുത്തുന്നു.

ഉദാഹരണത്തിന്, ഒരു സെർവറിൽ നിന്ന് ലഭിച്ച ഡാറ്റയെ അടിസ്ഥാനമാക്കി നിങ്ങൾ UI അപ്‌ഡേറ്റ് ചെയ്യുകയാണെന്ന് കരുതുക. ഡാറ്റാ പ്രോസസ്സിംഗും UI അപ്‌ഡേറ്റുകളും കൈകാര്യം ചെയ്യാൻ Promises (മൈക്രോടാസ്‌ക് ക്യൂ ഉപയോഗിക്കുന്നവ) ഉപയോഗിക്കുന്നത്, മാറ്റങ്ങൾ വേഗത്തിൽ പ്രയോഗിക്കപ്പെടുന്നു എന്ന് ഉറപ്പാക്കുന്നു, ഇത് സുഗമമായ ഉപയോക്തൃ അനുഭവം നൽകുന്നു. ഈ അപ്‌ഡേറ്റുകൾക്കായി നിങ്ങൾ setTimeout (ടാസ്‌ക് ക്യൂ ഉപയോഗിക്കുന്നത്) ഉപയോഗിക്കുകയാണെങ്കിൽ, കാലതാമസം ഉണ്ടാകാൻ സാധ്യതയുണ്ട്, ഇത് പ്രതികരണശേഷി കുറഞ്ഞ ആപ്ലിക്കേഷനിലേക്ക് നയിച്ചേക്കാം.

Starvation: Event Loop-നെ മൈക്രോടാസ്‌ക്കുകൾ തടയുമ്പോൾ

പ്രതികരണശേഷി മെച്ചപ്പെടുത്താൻ മൈക്രോടാസ്‌ക് ക്യൂ രൂപകൽപ്പന ചെയ്‌തിട്ടുണ്ടെങ്കിലും, ഇത് വിവേകത്തോടെ ഉപയോഗിക്കേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങൾ Event Loop-നെ ടാസ്‌ക് ക്യൂവിലേക്ക് നീങ്ങാനോ അപ്‌ഡേറ്റുകൾ റെൻഡർ ചെയ്യാനോ അനുവദിക്കാതെ, തുടർച്ചയായി ക്യൂവിൽ മൈക്രോടാസ്‌ക്കുകൾ ചേർക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് starvation ഉണ്ടാകാൻ സാധ്യതയുണ്ട്. മൈക്രോടാസ്‌ക് ക്യൂ ഒരിക്കലും കാലിയാകാത്തപ്പോൾ ഇത് സംഭവിക്കുന്നു, ഇത് Event Loop-നെ ഫലപ്രദമായി തടയുകയും മറ്റ് ടാസ്‌ക്കുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നത് തടയുകയും ചെയ്യുന്നു.

ഈ ഉദാഹരണം പരിഗണിക്കുക (Node.js പോലുള്ള എൻവയോൺമെന്റുകളിൽ process.nextTick ലഭ്യമാണ്, എന്നാൽ മറ്റ് സ്ഥലങ്ങളിലും ഇത് ബാധകമാണ്):

function starve() {
  Promise.resolve().then(() => {
    console.log('Microtask executed');
    starve(); // Recursively add another microtask
  });
}

starve();

ഈ ഉദാഹരണത്തിൽ, starve() ഫംഗ്‌ഷൻ, പുതിയ Promise കോൾബാക്കുകൾ തുടർച്ചയായി മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു. Event Loop ഈ മൈക്രോടാസ്‌ക്കുകൾ അനിശ്ചിതകാലത്തേക്ക് പ്രോസസ്സ് ചെയ്യുന്നതിനാൽ, മറ്റ് ടാസ്‌ക്കുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നത് തടയുകയും ആപ്ലിക്കേഷൻ പ്രവർത്തനരഹിതമാകാൻ സാധ്യതയുണ്ട്.

Starvation ഒഴിവാക്കാനുള്ള മികച്ച രീതികൾ:

• ഒരു ടാസ്‌ക്കിനുള്ളിൽ സൃഷ്ടിക്കപ്പെടുന്ന മൈക്രോടാസ്‌ക്കുകളുടെ എണ്ണം പരിമിതപ്പെടുത്തുക. Event Loop-നെ തടസ്സപ്പെടുത്തുന്ന മൈക്രോടാസ്‌ക്കുകളുടെ റിക്രസീവ് ലൂപ്പുകൾ ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുക.
• അത്യാവശ്യമല്ലാത്ത പ്രവർത്തനങ്ങൾക്കായി setTimeout ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. ഒരു പ്രവർത്തനം ഉടനടി എക്സിക്യൂട്ട് ചെയ്യേണ്ടതില്ലെങ്കിൽ, അത് ടാസ്‌ക് ക്യൂവിലേക്ക് മാറ്റിവയ്ക്കുന്നത് മൈക്രോടാസ്‌ക് ക്യൂ ഓവർലോഡ് ആകാതെ സഹായിക്കും.
• മൈക്രോടാസ്‌ക്കുകളുടെ പ്രകടനത്തെക്കുറിച്ചും ബോധവാന്മാരായിരിക്കുക. മൈക്രോടാസ്‌ക്കുകൾ സാധാരണയായി ടാസ്‌ക്കുകളേക്കാൾ വേഗതയുള്ളതാണെങ്കിലും, അമിതമായി ഉപയോഗിക്കുന്നത് ആപ്ലിക്കേഷന്റെ പ്രകടനത്തെ ബാധിക്കും.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും ഉപയോഗ കേസുകളും

ഉദാഹരണം 1: Promises ഉപയോഗിച്ച് അസിൻക്രണസ് ഇമേജ് ലോഡിംഗ്

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image at ${url}`));
    img.src = url;
  });
}

// Example usage:
loadImage('https://example.com/image.jpg')
  .then(img => {
    // Image loaded successfully.  Update the DOM.
    document.body.appendChild(img);
  })
  .catch(error => {
    // Handle image loading error.
    console.error(error);
  });

ഈ ഉദാഹരണത്തിൽ, ചിത്രം വിജയകരമായി ലോഡ് ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ എന്തെങ്കിലും പിശക് സംഭവിച്ചാൽ, loadImage ഫംഗ്‌ഷൻ ഒരു Promise നൽകുന്നു. .then(), .catch() കോൾബാക്കുകൾ മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു, ഇത് ഇമേജ് ലോഡിംഗ് പൂർത്തിയായ ശേഷം DOM അപ്‌ഡേറ്റും, പിശക് കൈകാര്യം ചെയ്യലും ഉടനടി നടപ്പിലാക്കുന്നു എന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം 2: ഡൈനാമിക് UI അപ്‌ഡേറ്റുകൾക്കായി MutationObserver ഉപയോഗിക്കുന്നു

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('Mutation observed:', mutation);
    // Update the UI based on the mutation.
  });
});

const elementToObserve = document.getElementById('myElement');

observer.observe(elementToObserve, {
  attributes: true,
  childList: true,
  subtree: true
});

// Later, modify the element:
elementToObserve.textContent = 'New content!';

DOM-ൽ ഉണ്ടാകുന്ന മാറ്റങ്ങൾ നിരീക്ഷിക്കാൻ MutationObserver നിങ്ങളെ സഹായിക്കുന്നു. ഒരു മ്യൂട്ടേഷൻ സംഭവിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, ഒരു ആട്രിബ്യൂട്ട് മാറ്റുമ്പോൾ, ഒരു ചൈൽഡ് നോഡ് ചേർക്കുമ്പോൾ), MutationObserver കോൾബാക്ക് മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു. DOM-ൽ ഉണ്ടാകുന്ന മാറ്റങ്ങളോട് പ്രതികരിച്ച് UI വേഗത്തിൽ അപ്‌ഡേറ്റ് ചെയ്യാൻ ഇത് സഹായിക്കുന്നു.

ഉദാഹരണം 3: Fetch API ഉപയോഗിച്ച് നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
    // Process the data and update the UI.
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // Handle the error.
  });

JavaScript-ൽ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നടത്താനുള്ള ഒരു ആധുനിക മാർഗ്ഗമാണ് Fetch API. .then() കോൾബാക്കുകൾ മൈക്രോടാസ്‌ക് ക്യൂവിൽ ചേർക്കുന്നു, ഇത് പ്രതികരണം ലഭിച്ചാലുടൻ ഡാറ്റാ പ്രോസസ്സിംഗും UI അപ്‌ഡേറ്റുകളും എക്സിക്യൂട്ട് ചെയ്യുന്നു എന്ന് ഉറപ്പാക്കുന്നു.

Node.js Event Loop പരിഗണനകൾ

Node.js-ലെ Event Loop ബ്രൗസർ എൻവയോൺമെന്റിന് സമാനമായി പ്രവർത്തിക്കുന്നു, പക്ഷേ ചില പ്രത്യേകതകളുണ്ട്. Node.js libuv ലൈബ്രറി ഉപയോഗിക്കുന്നു, ഇത് Event Loop-ൻ്റെ ഒരു നടപ്പിലാക്കലും അസിൻക്രണസ് I/O കഴിവുകളും നൽകുന്നു.

process.nextTick(): നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, നിലവിലെ പ്രവർത്തനം പൂർത്തിയാക്കിയ ശേഷം, Event Loop തുടരുന്നതിന് മുമ്പ് ഒരു കോൾബാക്ക് എക്സിക്യൂട്ട് ചെയ്യാൻ ഷെഡ്യൂൾ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന Node.js-ന്റെ പ്രത്യേക ഫംഗ്‌ഷനാണ് process.nextTick(). process.nextTick() ഉപയോഗിച്ച് ചേർത്ത കോൾബാക്കുകൾ, മൈക്രോടാസ്‌ക് ക്യൂവിലെ Promise കോൾബാക്കുകൾക്ക് മുമ്പ് എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു. എന്നിരുന്നാലും, starvation-നുള്ള സാധ്യതയുള്ളതുകൊണ്ട്, process.nextTick() വളരെ കുറഞ്ഞ അളവിൽ മാത്രം ഉപയോഗിക്കുക. ലഭ്യമാണെങ്കിൽ, queueMicrotask() സാധാരണയായി ഉപയോഗിക്കുന്നു.

setImmediate(): setImmediate() ഫംഗ്‌ഷൻ, Event Loop-ൻ്റെ അടുത്ത iteration-ൽ എക്സിക്യൂട്ട് ചെയ്യുന്നതിനായി ഒരു കോൾബാക്ക് ഷെഡ്യൂൾ ചെയ്യുന്നു. ഇത് setTimeout(() => { ... }, 0)-ന് സമാനമാണ്, എന്നാൽ setImmediate() I/O-യുമായി ബന്ധപ്പെട്ട ടാസ്‌ക്കുകൾക്കായാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. setImmediate(), setTimeout(() => { ... }, 0) എന്നിവ തമ്മിലുള്ള എക്സിക്യൂഷൻ ക്രമം പ്രവചനാതീതമാണ്, കൂടാതെ ഇത് സിസ്റ്റത്തിൻ്റെ I/O പ്രകടനത്തെ ആശ്രയിച്ചിരിക്കുന്നു.

കാര്യക്ഷമമായ Event Loop മാനേജ്മെൻ്റിനായുള്ള മികച്ച രീതികൾ

• പ്രധാന ത്രെഡിനെ തടയുന്നത് ഒഴിവാക്കുക. കൂടുതൽ സമയം എടുക്കുന്ന synchronous പ്രവർത്തനങ്ങൾ Event Loop-നെ തടസ്സപ്പെടുത്തുകയും, ആപ്ലിക്കേഷൻ പ്രതികരിക്കാതിരിക്കാൻ കാരണമാകുകയും ചെയ്യും. കഴിയുന്നത്രയും അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുക.
• നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക. കാര്യക്ഷമമായ കോഡ് വേഗത്തിൽ എക്സിക്യൂട്ട് ചെയ്യും, ഇത് കോൾ സ്റ്റാക്കിൽ ചെലവഴിക്കുന്ന സമയം കുറയ്ക്കുകയും കൂടുതൽ ടാസ്‌ക്കുകൾ പ്രോസസ്സ് ചെയ്യാൻ Event Loop-നെ അനുവദിക്കുകയും ചെയ്യുന്നു.
• അസിൻക്രണസ് പ്രവർത്തനങ്ങൾക്കായി Promises ഉപയോഗിക്കുക. പരമ്പരാഗത കോൾബാക്കുകളുമായി താരതമ്യം ചെയ്യുമ്പോൾ, അസിൻക്രണസ് കോഡ് കൈകാര്യം ചെയ്യാൻ Promises കൂടുതൽ വ്യക്തവും, കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു.
• മൈക്രോടാസ്‌ക് ക്യൂവിനെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക. Starvation-ലേക്ക് നയിച്ചേക്കാവുന്ന അമിതമായ മൈക്രോടാസ്‌ക്കുകൾ ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുക.
• കമ്പ്യൂട്ടേഷണൽ തീവ്രമായ ടാസ്‌ക്കുകൾക്കായി Web Workers ഉപയോഗിക്കുക. വെബ് വർക്കേഴ്‌സ്, പ്രത്യേക ത്രെഡുകളിൽ JavaScript കോഡ് പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു, ഇത് പ്രധാന ത്രെഡിനെ തടയുന്നതിൽ നിന്ന് തടയുന്നു. (ബ്രൗസർ എൻവയോൺമെൻ്റിന് മാത്രം)
• നിങ്ങളുടെ കോഡ് പ്രൊഫൈൽ ചെയ്യുക. പ്രകടനപരമായ പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകളോ, Node.js പ്രൊഫൈലിംഗ് ടൂളുകളോ ഉപയോഗിക്കുക.
• ഇവന്റുകൾ ഡെബൗൺസ് ചെയ്യുക, ത്രോട്ടിൽ ചെയ്യുക. ഇടയ്ക്കിടെ സംഭവിക്കുന്ന ഇവന്റുകൾക്കായി (ഉദാഹരണത്തിന്, സ്ക്രോൾ ഇവന്റുകൾ, റെസൈസ് ഇവന്റുകൾ), ഇവന്റ് എങ്കിലും കുറയ്ക്കുന്നതിന് ഡെബൗൺസിംഗോ ത്രോട്ടിലിംഗോ ഉപയോഗിക്കുക. ഇത് Event Loop-ലെ ലോഡ് കുറയ്ക്കുന്നതിലൂടെ പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും.

ഉപസംഹാരം

JavaScript Event Loop, Task Queue, Microtask Queue എന്നിവയെക്കുറിച്ച് മനസ്സിലാക്കുന്നത്, പ്രകടനം മെച്ചപ്പെടുത്തുന്നതും, പ്രതികരണശേഷിയുള്ളതുമായ JavaScript ആപ്ലിക്കേഷനുകൾ എഴുതുന്നതിന് അത്യാവശ്യമാണ്. Event Loop എങ്ങനെ പ്രവർത്തിക്കുമെന്നും മനസ്സിലാക്കുന്നതിലൂടെ, അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്നും മികച്ച പ്രകടനത്തിനായി നിങ്ങളുടെ കോഡ് എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യണമെന്നും നിങ്ങൾക്ക് തീരുമാനമെടുക്കാൻ കഴിയും. ആവശ്യത്തിന് മൈക്രോടാസ്‌ക്കുകൾക്ക് മുൻഗണന നൽകുക, starvation ഒഴിവാക്കുക, കൂടാതെ ബ്ലോക്ക് ചെയ്യാത്ത പ്രവർത്തനങ്ങളിൽ നിന്ന് എപ്പോഴും പ്രധാന ത്രെഡിനെ സ്വതന്ത്രമാക്കാൻ ശ്രമിക്കുക.

ഈ ഗൈഡ് JavaScript Event Loop-നെക്കുറിച്ച് ഒരു സമഗ്രമായ വിവരണം നൽകുന്നു. ഇവിടെ നൽകിയിട്ടുള്ള അറിവും, മികച്ച രീതികളും ഉപയോഗിച്ച്, മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്ന ശക്തവും, കാര്യക്ഷമവുമായ JavaScript ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും.